<%@page contentType="text/html; charset=UTF-8" %>

<!DOCTYPE html>
<html>
<head>
    <!--公共资源-->
    <%@include file="/WEB-INF/jsp/common_head.jsp"%>
    <script type="text/javascript" src="/static/js/index.js"></script>
    <script>
        jQuery(function ($) {
            // 所有的ajax请求成功之后执行，在ajax自己的success之后执行
            $(document).ajaxSuccess(function(evt, request){
                if (request.responseJSON && request.responseJSON.reLogin) {
                    location.href = "/";
                }
                // 如果有提示信息，就提示
                if (request.responseJSON && request.responseJSON.message) {
                    alert(request.responseJSON.message);
                }
            });

            /*$("[url]").click(function () {
                loadMain($(this).attr("url"));
            });*/

            /*
                使用事件委派机制进行事件绑定，可以为当前不存在的元素绑定事件
                事件委派的原理：将事件绑定到已存在的元素上，这个元素必须是事件绑定的目标元素的父元素
                当目标元素添加到目标元素的父元素中时，点击目标元素，也会触发父元素的点击事件，然后判断
                点击是元素是否为目标元素，如果是则执行事件相关的代码

                document：接受委派的元素
                [url]: 委派者
             */
            /*$(document).click(function (e) {
                if ($(e.target).is("[url]")) {
                    loadMain($(e.target).attr("url"));
                }
            });*/

            // 事件委派的简写形式（语法糖）
            $("body").on("click", "[url]", function () {
                loadMain($(this).attr("url"));
            });

            // 全选统一处理
            $("#mainDiv").on("click", "#selectAll", function () {
                $(":checkbox[name=id]").prop("checked", this.checked);
            }).on("click", ":checkbox[name=id]", function () {
                $("#selectAll").prop("checked", $(":checkbox[name=id]:not(:checked)").size() == 0);
            });

            // 显示欢迎页
            loadMain('welcome.html');

            // 加载缓存下拉框
            $.get('/cache/allOptions').done(function (data) {
                window.options = data;
            });

            // 加载所有者下拉框
            $.get('/user/owners', function (data) {
                window.owners = data;
            });
        });

        // 关闭可见的模态窗口
        function closeDialog() {
            $("div[id$=Modal]:visible").modal('hide');
        }

        let $backContent = [];
        function loadMain(url, data, callback) {
            //$("#mainDiv").load(url, data, callback);
            $.ajax({
                url,
                data,
                success: callback
            }).done(function (data) {
                if(typeof data === 'string') {
                    if ($backContent.length == 10) {
                        $backContent.shift(); // 删除并返回第一个元素
                    }
                    $backContent.push($("#mainDiv").children());
                    $("#mainDiv").html(data);
                }
            });
        }

        function back() {
            $("#mainDiv").html("").append($backContent.pop());
        }
    </script>
</head>

<body>
<!-- 我的资料 -->
<%@include file="inc/dialog/me.jsp"%>

<!-- 修改密码的模态窗口 -->
<%@include file="inc/dialog/changePwd.jsp"%>

<!-- 退出系统的模态窗口 -->
<%@include file="inc/dialog/logout.jsp"%>

<!-- 左侧导航 -->
<div id="navigation" style="position:absolute;width:18%;height:100%;border-right:1px solid #999;overflow:hidden;">
    <ul id="no1" class="nav nav-pills nav-stacked">
        <li class="liClass"><a href="javascript:;" url="welcome.html"><span class="glyphicon glyphicon-home"></span> 欢迎</a></li>
        <li class="liClass">
            <a href="#no5" class="collapsed" data-toggle="collapse"><span class="glyphicon glyphicon-lock"></span> 权限管理</a>
            <ul id="no5" class="nav nav-pills nav-stacked collapse">
                <li class="liClass"><a href="javascript:;" url="qx/permission/index.html"><span class="glyphicon glyphicon-ok-sign"></span> 许可维护</a></li>
                <li class="liClass"><a href="javascript:;" url="qx/role/index.html"><span class="glyphicon glyphicon-education"></span> 角色维护</a></li>
                <li class="liClass"><a href="javascript:;" url="qx/user/index.html"><span class="glyphicon glyphicon-user"></span> 用户维护</a></li>
            </ul>
        </li>
        <li class="liClass">
            <a href="#no4" class="collapsed" data-toggle="collapse"><span class="glyphicon glyphicon-book"></span> 数据字典</a>
            <ul id="no4" class="nav nav-pills nav-stacked collapse">
                <li class="liClass">
                    <a href="javascript:;" url="/type/index.html">
                        <span class="glyphicon glyphicon-tasks"></span> 字典类型
                    </a>
                </li>
                <li class="liClass">
                    <a href="javascript:;" url="/value/index.html">
                        <span class="glyphicon glyphicon-list"></span> 字典值
                    </a>
                </li>
            </ul>
        </li>
        <li class="liClass">
            <a href="javascript:;" url="dept/index.html">
                <span class="glyphicon glyphicon-flag"></span> 部门管理
            </a>
        </li>
        <li class="liClass"><a href="javascript:;" url="activity/index.html"><span class="glyphicon glyphicon-play-circle"></span> 市场活动</a></li>
        <li class="liClass"><a href="javascript:;" url="clue/index.html"><span class="glyphicon glyphicon-search"></span> 线索（潜在客户）</a></li>
        <li class="liClass"><a href="javascript:;" url="customer/index.html"><span class="glyphicon glyphicon-user"></span> 客户</a></li>
        <li class="liClass"><a href="javascript:;" url="contacts/index.html"><span class="glyphicon glyphicon-earphone"></span> 联系人</a></li>
        <li class="liClass"><a href="javascript:;" url="transaction/index.html"><span class="glyphicon glyphicon-usd"></span> 交易（商机）</a></li>
        <li class="liClass">
            <a href="#no2" class="collapsed" data-toggle="collapse"><span class="glyphicon glyphicon-stats"></span> 统计图表</a>
            <ul id="no2" class="nav nav-pills nav-stacked collapse">
                <li class="liClass"><a href="javascript:;" url="chart/transaction.html"><span class="glyphicon glyphicon-chevron-right"></span> 交易统计图表</a></li>
                <li class="liClass"><a href="javascript:;" url="chart/activity.html"><span class="glyphicon glyphicon-chevron-right"></span> 市场活动统计图表</a></li>
                <li class="liClass"><a href="javascript:;" url="chart/clue.html"><span class="glyphicon glyphicon-chevron-right"></span> 线索统计图表</a></li>
                <li class="liClass"><a href="javascript:;" url="chart/customerAndContacts.html"><span class="glyphicon glyphicon-chevron-right"></span> 客户和联系人统计图表</a></li>
            </ul>
        </li>
        <li class="liClass">
            <a href="#no6" class="collapsed" data-toggle="collapse"><span class="glyphicon glyphicon-heart"></span> 个人中心</a>
            <ul id="no6" class="nav nav-pills nav-stacked collapse">
                <li class="liClass">
                    <a href="###" data-toggle="modal" data-target="#meInfoModal">
                        <span class="glyphicon glyphicon-list-alt"></span> 我的资料
                    </a>
                </li>
                <li class="liClass">
                    <a href="###" data-toggle="modal" data-target="#changePwdModal">
                        <span class="glyphicon glyphicon-edit"></span> 修改密码
                    </a>
                </li>
                <li class="liClass">
                    <a href="###" data-toggle="modal" data-target="#exitModal">
                        <span class="glyphicon glyphicon-off"></span> 退出
                    </a>
                </li>
            </ul>
        </li>
    </ul>
</div>

<!-- 右侧工作区 -->
<div id="mainDiv" style="position:absolute;top:0px;left:18%;width:82%;height:100%;padding: 0 20px;overflow:auto;">

</div>
</body>
</html>